<template>
  <div class="sms-config">
    <div class="page-header">
      <h1>短信配置</h1>
      <p>配置短信服务提供商和模板</p>
    </div>

    <el-card shadow="hover">
       <el-form :model="smsForm" label-width="150px" style="max-width: 600px;">
        <el-form-item label="服务商">
          <el-select v-model="smsForm.provider">
            <el-option label="阿里云" value="aliyun" />
            <el-option label="腾讯云" value="tencent" />
          </el-select>
        </el-form-item>
        <el-form-item label="AccessKey ID">
          <el-input v-model="smsForm.accessKeyId" />
        </el-form-item>
        <el-form-item label="AccessKey Secret">
          <el-input v-model="smsForm.accessKeySecret" type="password" show-password />
        </el-form-item>
        <el-form-item label="短信签名">
          <el-input v-model="smsForm.signature" />
        </el-form-item>
        <el-form-item label="登录验证码模板ID">
          <el-input v-model="smsForm.loginTemplateId" />
        </el-form-item>
         <el-form-item label="注册验证码模板ID">
          <el-input v-model="smsForm.registerTemplateId" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveSmsConfig">保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';

const smsForm = reactive({
  provider: 'aliyun',
  accessKeyId: 'LTAI5t****************',
  accessKeySecret: 'zCM***************************',
  signature: '创意众筹',
  loginTemplateId: 'SMS_154950000',
  registerTemplateId: 'SMS_154950001',
});

const saveSmsConfig = () => {
  ElMessage.success('短信配置已保存！');
};
</script>

<style scoped>
.sms-config { max-width: 1200px; margin: 0 auto; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; }
.page-header p { color: #666; }
</style> 